<template>
  <div class="system-table-box">
    <el-upload
      v-model:file-list="files"
      class="avatar-uploader"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      list-type="picture"
    >
      <!--      <el-button type="primary">点击上传</el-button>-->
      <el-icon class="avatar-uploader-icon">
        <icon-add-pic />
      </el-icon>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script>
import { defineComponent, reactive, computed } from "vue";

export default defineComponent({
  props: {
    data: { type: Array, default: () => [] }, // 数据源
    fileList: { type: Array, default: () => [] }, // 数据源
    select: { type: Array, default: () => [] }, // 已选择的数据，与selection结合使用
    showIndex: { type: Boolean, default: false }, // 是否展示index选择，默认否
    showSelection: { type: Boolean, default: false }, // 是否展示选择框，默认否
    showPage: { type: Boolean, default: true } // 是否展示页级组件，默认是
  },
  setup(props, context) {
    const files = computed(() =>
      props.files && props.files.length > 0 ? props.files : []
    );
    const handleRemove = (uploadFile, uploadFiles) => {
      console.log(uploadFile, uploadFiles);
    };

    const handlePreview = file => {
      console.log(file);
    };
    let timer = null;
    return {
      files,
      handlePreview,
      handleRemove
    };
  }
});
</script>

<style lang="scss" scoped>
:deep(.avatar-uploader .avatar) {
  width: 178px;
  height: 178px;
  display: block;
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  width: 148px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

:deep(.avatar-uploader .el-upload) {
  border: 2px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
  color: #7e9cff !important;
}
</style>
